<template lang="pug">
  .tobanScheduleItem
    el-row(:gutter="12" type="flex" align="middle")
      el-col(:span="2" v-if="!isEdit")
        span.courseTag {{dictFilter(String(course.category), 'courseCategory', 'category')}}
      el-col.tc(:span="6")
        span.f15.vm(v-if="!isEdit") {{course.begin}} ~ {{course.end}}
        template(v-if="isEdit")
          el-time-picker(
            style="width: 100%"
            is-range
            v-model="course.timeRange"
            range-separator="至"
            size="large"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          )
      el-col(:span="4")
        span.courseName {{course.teacherName}}
      el-col(:span="8")
        span.courseName(v-if="!isEdit") {{course.activityContent}}
        template(v-else)
          //- el-input.mr5(style="width: 60%" v-model="course.remark" size="large" placeholder="备注，可选输入")
          .action-div
            el-button.gradientVertical(
              size="large"
              :disabled="timeOver"
              @click="selectCourse({...course, begin, end })"
            ) 选择课程
      el-col.tc(:span="2" v-if="!isAdd && canSchedule")
        a(v-if="indexInList !== list.length - 1" href="javascript:void()" @click="sortHandle('down')")
          i.el-icon-sort-down
        a(v-if="indexInList !== 0" href="javascript:void()" @click="sortHandle('up')")
          i.el-icon-sort-up
      //- el-col(:span="5" v-if="!isEdit")
      //-   span.f15 备注：{{course.remark || '暂无'}}
      el-col.tr.actions(:span="5")
        el-row(type="flex" justify="space-between")
          el-col(:span="18")
            el-tooltip(content="编辑" placement="left-start" v-if="!isAdd && canSchedule")
              el-button(:icon="`${isEdit ? 'el-icon-check' : 'el-icon-edit'}`" @click="() => editHandle(true)" type="info" size="mini" circle)
            el-popover(placement="bottom" trigger="click" v-model="remarkVisible" width="310px" v-if="!isAdd")
              .remarkBox
                el-input(v-model="course.remark" type="textarea" :rows="4")
                footer.tr.mt10(v-if="canSchedule")
                  el-button(size="large" type="success" v-if="canSchedule" @click="remarkConcel" round plain) 取消
                  el-button.gradientVertical(size="large" v-if="canSchedule" @click="editHandle(true, false)" round) 确定
              a(href="javascript:void()" slot="reference")
                i.el-icon-info(icon="el-icon-info" size="mini" circle)
          el-col.tc(:span="6" v-if="!isAdd && canSchedule")
            //- el-button(icon="el-icon-edit-outline" type="info"  size="mini" circle)
            el-tooltip.ml20(content="删除" placement="right-start")
              el-button(icon="el-icon-close" type="info" size="mini" circle @click="$emit('delHandle', value.id)")
</template>
<script>
import dayjs from 'dayjs'
import dictMixin from '@/mixins/dict'
import { deepClone } from '@/utils'
export default {
  mixins: [dictMixin],
  props: {
    list: {
      type: Array,
      default: () => ([])
    },
    value: {
      type: Object,
      default: () => (null)
    },
    isAdd: {
      type: Boolean,
      default: false
    },
    // 能否排课
    canSchedule: {
      type: Boolean,
      default: true
    },
    indexInList: {
      type: Number,
      default: -1
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      selectorVisible: false,
      course: {
        remark: '',
        timeRange: [new Date('1990-01-01 8:00:00'), new Date('1990-01-01 8:30:00')]
      },
      startTime: '',
      endTime: '',
      initCourse: {},
      remarkVisible: false, // 是否显示备注弹窗
      isEdit: this.isAdd // 编辑状态,

    }
  },
  computed: {
    begin () {
      const { timeRange } = this.course
      // return timeRange[0]
      return dayjs(timeRange[0]).format('HH:mm')
    },
    end () {
      const { timeRange } = this.course
      // return timeRange[1]
      return dayjs(timeRange[1]).format('HH:mm')
    },
    // 时间是否存在重叠
    timeOver () {
      const { list, course, begin, end } = this
      if (!begin || !end) {
        return true
      }
      return list.some(item => !(begin >= item.end || end <= item.begin) && course.id !== item.id)
    }
  },
  watch: {
    value: {
      handler (val) {
        const { list } = this
        if (val) {
          this.course = {
            ...val,
            timeRange: [new Date(`1990-01-01${val.begin ? ' ' + val.begin : ''}`), new Date(`1990-01-01${val.end ? ' ' + val.end : ''}`)]
          }
        }
        // 初始化已提交的课程信息
        if (val && val.id && !val.isAdd) {
          this.initCourse = {
            id: val.id,
            remark: val.remark,
            resObj: val.coursePlanClasses?.resObj || val.resObj,
            category: val.coursePlanClasses?.courseType ? String(val.coursePlanClasses?.courseType) : '3',
            name: val.coursePlanClasses?.courseName || val.activityContent,
            typeName: val.coursePlanClasses?.courseName
          }
        }
        console.log(list)
        // 新增的时候初始化时间，取列表最后一项时间的结束时间为开始时间，半小时跨度
        if (this.isAdd && list.length > 0) {
          const lastCourse = list[list.length - 1]
          const { end = '' } = lastCourse
          const startTime = new Date(`1990-01-01 ${end}`)
          const endTime = new Date(startTime.getTime() + 1000 * 1800)
          this.course = {
            timeRange: [startTime, endTime]
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    // 编辑,通过flag判断是否自身调用，而不是父组件调用
    editHandle (flag, edit) {
      const { course, begin, end } = this
      this.remarkVisible = false
      this.isEdit = edit ?? !this.isEdit
      if (!this.isEdit && flag) {
        this.$emit('saveSchedule', {
          ...course,
          begin,
          end
        }, false)
      }
    },
    // 交换排序
    sortHandle (type) {
      const { list, value, indexInList } = this
      const item = deepClone(value)
      const exItem = deepClone(list[type === 'up' ? indexInList - 1 : indexInList + 1])
      this.$emit('saveSchedule', {
        ...value,
        begin: exItem.begin,
        end: exItem.end
      }, false)
      this.$emit('saveSchedule', {
        ...exItem,
        begin: item.begin,
        end: item.end
      }, false)
    },
    // 备注取消
    remarkConcel () {
      this.remarkVisible = false
      this.course.remark = ''
    },

    selectCourse (item) {
      this.$emit('selectCourse', { ...item })
    }

  }
}
</script>
<style lang="scss" scoped>
.tobanScheduleItem {
  margin-bottom: 16px;
  padding: 32px 0;
  border-bottom: 1px dashed #E8E8E8;
  color: #333333;
}
.courseTag{
  display: inline-block;
  padding: 0 12px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  font-family: PingFang SC;
  ;
  color: #DA473A;
  border: 1px solid rgba(218, 71, 58, 0.7);
  border-radius: 5px 0px 5px 0px;
}

.courseName{
  font-size: 17px;
}

.actions{
  text-align: right;
  .el-icon-info {
    color: #CDCDCD;
    font-size: 30px;
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 20px;

    &:hover{
      color: #DA473A
    }
  }
  ::v-deep{
    .el-button--info{
      background: #CDCDCD;
      border-color: #CDCDCD;

      &:hover{
        background: #DA473A;
        border-color: #DA473A;
      }
    }
  }
}
.action-div{
  display: flex;
  flex-direction: row;
}
</style>
